[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { motion } from "framer-motion" import { Check, ChevronRight, Menu, X, Moon, Sun, ArrowRight, Star, Zap, Shield, Users, BarChart, Layers, } from "lucide-react" import { Button } from "@/components/ui/button" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useTheme } from "next-themes" export default function LandingPage() { const [isScrolled, setIsScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const handleScroll = () => { if (window.scrollY > 10) { setIsScrolled(true) } else { setIsScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const toggleTheme = () => { setTheme(theme === "dark" ? "light" : "dark") } const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, } const features = [ { title: "Smart Automation", description: "Automate repetitive tasks and workflows to save time and reduce errors.", icon: , }, { title: "Advanced Analytics", description: "Gain valuable insights with real-time data visualization and reporting.", icon: , }, { title: "Team Collaboration", description: "Work together seamlessly with integrated communication tools.", icon: , }, { title: "Enterprise Security", description: "Keep your data safe with end-to-end encryption and compliance features.", icon: , }, { title: "Seamless Integration", description: "Connect with your favorite tools through our extensive API ecosystem.", icon: , }, { title: "24/7 Support", description: "Get help whenever you need it with our dedicated support team.", icon: , }, ] return (

SaaSify

{/* Mobile menu */} {mobileMenuOpen && (

setMobileMenuOpen(false)}> Features setMobileMenuOpen(false)}> Testimonials setMobileMenuOpen(false)}> Pricing setMobileMenuOpen(false)}> FAQ

setMobileMenuOpen(false)}> Log in

)}

{/* Hero Section */}

Launching Soon

Elevate Your Workflow with SaaSify

The all-in-one platform that helps teams collaborate, automate, and deliver exceptional results. Streamline your processes and focus on what matters most.

No credit card

14-day trial

Cancel anytime

{/* Logos Section */}

Trusted by innovative companies worldwide

{[1, 2, 3, 4, 5].map((i) => (

))}

{/* Features Section */}

Features

Everything You Need to Succeed

Our comprehensive platform provides all the tools you need to streamline your workflow, boost productivity, and achieve your goals.

{features.map((feature, i) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* How It Works Section */}

How It Works

Simple Process, Powerful Results

Get started in minutes and see the difference our platform can make for your business.

{[ { step: "01", title: "Create Account", description: "Sign up in seconds with just your email. No credit card required to get started.", }, { step: "02", title: "Configure Workspace", description: "Customize your workspace to match your team's unique workflow and requirements.", }, { step: "03", title: "Boost Productivity", description: "Start using our powerful features to streamline processes and achieve your goals.", }, ].map((step, i) => (

{step.step}

{step.title}

{step.description}

))}

{/* Testimonials Section */}

Testimonials

Loved by Teams Worldwide

Don't just take our word for it. See what our customers have to say about their experience.

{[ { quote: "SaaSify has transformed how we manage our projects. The automation features have saved us countless hours of manual work.", author: "Sarah Johnson", role: "Project Manager, TechCorp", rating: 5, }, { quote: "The analytics dashboard provides insights we never had access to before. It's helped us make data-driven decisions that have improved our ROI.", author: "Michael Chen", role: "Marketing Director, GrowthLabs", rating: 5, }, { quote: "Customer support is exceptional. Any time we've had an issue, the team has been quick to respond and resolve it. Couldn't ask for better service.", author: "Emily Rodriguez", role: "Operations Lead, StartupX", rating: 5, }, { quote: "We've tried several similar solutions, but none compare to the ease of use and comprehensive features of SaaSify. It's been a game-changer.", author: "David Kim", role: "CEO, InnovateNow", rating: 5, }, { quote: "The collaboration tools have made remote work so much easier for our team. We're more productive than ever despite being spread across different time zones.", author: "Lisa Patel", role: "HR Director, RemoteFirst", rating: 5, }, { quote: "Implementation was seamless, and the ROI was almost immediate. We've reduced our operational costs by 30% since switching to SaaSify.", author: "James Wilson", role: "COO, ScaleUp Inc", rating: 5, }, ].map((testimonial, i) => (

{Array(testimonial.rating) .fill(0) .map((_, j) => ( ))}

{testimonial.quote}

{testimonial.author.charAt(0)}

{testimonial.author}

{testimonial.role}

))}

{/* Pricing Section */}

Pricing

Simple, Transparent Pricing

Choose the plan that's right for your business. All plans include a 14-day free trial.

Monthly Annually (Save 20%)

{[ { name: "Starter", price: "$29", description: "Perfect for small teams and startups.", features: ["Up to 5 team members", "Basic analytics", "5GB storage", "Email support"], cta: "Start Free Trial", }, { name: "Professional", price: "$79", description: "Ideal for growing businesses.", features: [ "Up to 20 team members", "Advanced analytics", "25GB storage", "Priority email support", "API access", ], cta: "Start Free Trial", popular: true, }, { name: "Enterprise", price: "$199", description: "For large organizations with complex needs.", features: [ "Unlimited team members", "Custom analytics", "Unlimited storage", "24/7 phone & email support", "Advanced API access", "Custom integrations", ], cta: "Contact Sales", }, ].map((plan, i) => ( {plan.popular && (

{plan.name}

{plan.price} /month

{plan.description}

{feature}

))}

{[ { name: "Starter", price: "$23", description: "Perfect for small teams and startups.", features: ["Up to 5 team members", "Basic analytics", "5GB storage", "Email support"], cta: "Start Free Trial", }, { name: "Professional", price: "$63", description: "Ideal for growing businesses.", features: [ "Up to 20 team members", "Advanced analytics", "25GB storage", "Priority email support", "API access", ], cta: "Start Free Trial", popular: true, }, { name: "Enterprise", price: "$159", description: "For large organizations with complex needs.", features: [ "Unlimited team members", "Custom analytics", "Unlimited storage", "24/7 phone & email support", "Advanced API access", "Custom integrations", ], cta: "Contact Sales", }, ].map((plan, i) => ( {plan.popular && (

{plan.name}

{plan.price} /month

{plan.description}

{feature}

))}

{/* FAQ Section */}

FAQ

Frequently Asked Questions

Find answers to common questions about our platform.

{[ { question: "How does the 14-day free trial work?", answer: "Our 14-day free trial gives you full access to all features of your selected plan. No credit card is required to sign up, and you can cancel at any time during the trial period with no obligation.", }, { question: "Can I change plans later?", answer: "Yes, you can upgrade or downgrade your plan at any time. If you upgrade, the new pricing will be prorated for the remainder of your billing cycle. If you downgrade, the new pricing will take effect at the start of your next billing cycle.", }, { question: "Is there a limit to how many users I can add?", answer: "The number of users depends on your plan. The Starter plan allows up to 5 team members, the Professional plan allows up to 20, and the Enterprise plan has no limit on team members.", }, { question: "Do you offer discounts for nonprofits or educational institutions?", answer: "Yes, we offer special pricing for nonprofits, educational institutions, and open-source projects. Please contact our sales team for more information.", }, { question: "How secure is my data?", answer: "We take security very seriously. All data is encrypted both in transit and at rest. We use industry-standard security practices and regularly undergo security audits. Our platform is compliant with GDPR, CCPA, and other relevant regulations.", }, { question: "What kind of support do you offer?", answer: "Support varies by plan. All plans include email support, with the Professional plan offering priority email support. The Enterprise plan includes 24/7 phone and email support. We also have an extensive knowledge base and community forum available to all users.", }, ].map((faq, i) => ( {faq.question} {faq.answer} ))}

{/* CTA Section */}

Ready to Transform Your Workflow?

Join thousands of satisfied customers who have streamlined their processes and boosted productivity with our platform.

No credit card required. 14-day free trial. Cancel anytime.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import "@/styles/globals.css" import { Inter } from "next/font/google" import type { Metadata } from "next" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "SaaSify - Streamline Your Workflow", description: "Boost productivity, reduce costs, and scale your business with our all-in-one SaaS platform.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="styles/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 221 83% 53%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 221 83% 53%; --radius: 1rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 217 91% 60%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 217 91% 60%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } .animate-in { animation: animate-in 0.5s ease-out; } @keyframes animate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 0.25rem)", sm: "calc(var(--radius) - 0.5rem)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]json:file="package.json" { "name": "saas-landing-page", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-tabs": "^1.0.4", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } }

About

Tags

Share

About

Tags

Share

More from code-wrangler

More Templates Like This

About

Tags

Share

About

Tags

Share

More from code-wrangler

More Templates Like This